<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>IconFont Demo</title>
  <link rel="shortcut icon" href="https://img.alicdn.com/tps/i4/TB1_oz6GVXXXXaFXpXXJDFnIXXX-64-64.ico" type="image/x-icon"/>
  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
  <link rel="stylesheet" href="demo.css">
  <link rel="stylesheet" href="iconfont.css">
  <script src="iconfont.js"></script>
  <!-- jQuery -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
  <!-- 代码高亮 -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
</head>
<body>
  <div class="main">
    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">&#xe86b;</a></h1>
    <div class="nav-tabs">
      <ul id="tabs" class="dib-box">
        <li class="dib active"><span>Unicode</span></li>
        <li class="dib"><span>Font class</span></li>
        <li class="dib"><span>Symbol</span></li>
      </ul>
      
      <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=1789515" target="_blank" class="nav-more">查看项目</a>
      
    </div>
    <div class="tab-container">
      <div class="content unicode" style="display: block;">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
              <span class="icon iconfont">&#xe68d;</span>
                <div class="name">布局_(1)</div>
                <div class="code-name">&amp;#xe68d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe68e;</span>
                <div class="name">规_双箭头</div>
                <div class="code-name">&amp;#xe68e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe68f;</span>
                <div class="name">双箭头</div>
                <div class="code-name">&amp;#xe68f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe690;</span>
                <div class="name">影像</div>
                <div class="code-name">&amp;#xe690;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe691;</span>
                <div class="name">箭头</div>
                <div class="code-name">&amp;#xe691;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe629;</span>
                <div class="name">全屏</div>
                <div class="code-name">&amp;#xe629;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe86e;</span>
                <div class="name">缩小</div>
                <div class="code-name">&amp;#xe86e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe67b;</span>
                <div class="name">分享记录</div>
                <div class="code-name">&amp;#xe67b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe688;</span>
                <div class="name">采集配置</div>
                <div class="code-name">&amp;#xe688;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe689;</span>
                <div class="name">影像对比</div>
                <div class="code-name">&amp;#xe689;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe68a;</span>
                <div class="name">基础数据</div>
                <div class="code-name">&amp;#xe68a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe68b;</span>
                <div class="name">检查记录</div>
                <div class="code-name">&amp;#xe68b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe68c;</span>
                <div class="name">数据管理</div>
                <div class="code-name">&amp;#xe68c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe652;</span>
                <div class="name">菜单栏_分享审批</div>
                <div class="code-name">&amp;#xe652;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe653;</span>
                <div class="name">菜单栏_日志管理</div>
                <div class="code-name">&amp;#xe653;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe654;</span>
                <div class="name">菜单栏_服务保修</div>
                <div class="code-name">&amp;#xe654;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe655;</span>
                <div class="name">菜单栏_质量报告</div>
                <div class="code-name">&amp;#xe655;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe656;</span>
                <div class="name">菜单栏_归档记录</div>
                <div class="code-name">&amp;#xe656;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe657;</span>
                <div class="name">菜单栏_访问授权</div>
                <div class="code-name">&amp;#xe657;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe659;</span>
                <div class="name">菜单栏_参数设置</div>
                <div class="code-name">&amp;#xe659;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe65a;</span>
                <div class="name">菜单栏_任务管理</div>
                <div class="code-name">&amp;#xe65a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe65b;</span>
                <div class="name">菜单栏_数据监管</div>
                <div class="code-name">&amp;#xe65b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe65c;</span>
                <div class="name">菜单栏_数据交换</div>
                <div class="code-name">&amp;#xe65c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe65d;</span>
                <div class="name">菜单栏_机构选择</div>
                <div class="code-name">&amp;#xe65d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe65e;</span>
                <div class="name">菜单栏_采集策略</div>
                <div class="code-name">&amp;#xe65e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe65f;</span>
                <div class="name">菜单栏_箭头下</div>
                <div class="code-name">&amp;#xe65f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe660;</span>
                <div class="name">菜单栏_箭头上</div>
                <div class="code-name">&amp;#xe660;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe661;</span>
                <div class="name">菜单栏_展开</div>
                <div class="code-name">&amp;#xe661;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe662;</span>
                <div class="name">状态栏_消息</div>
                <div class="code-name">&amp;#xe662;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe665;</span>
                <div class="name">菜单栏_收起</div>
                <div class="code-name">&amp;#xe665;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe666;</span>
                <div class="name">菜单栏_右</div>
                <div class="code-name">&amp;#xe666;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe667;</span>
                <div class="name">状态栏_设置</div>
                <div class="code-name">&amp;#xe667;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe663;</span>
                <div class="name">资质认证</div>
                <div class="code-name">&amp;#xe663;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe664;</span>
                <div class="name">实名认证</div>
                <div class="code-name">&amp;#xe664;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe668;</span>
                <div class="name">存储</div>
                <div class="code-name">&amp;#xe668;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe669;</span>
                <div class="name">图表选中</div>
                <div class="code-name">&amp;#xe669;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe66a;</span>
                <div class="name">列表默认</div>
                <div class="code-name">&amp;#xe66a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe66b;</span>
                <div class="name">窗口切换</div>
                <div class="code-name">&amp;#xe66b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe66c;</span>
                <div class="name">表格_查看详情</div>
                <div class="code-name">&amp;#xe66c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe66d;</span>
                <div class="name">表格_信息修改</div>
                <div class="code-name">&amp;#xe66d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe66e;</span>
                <div class="name">申请单</div>
                <div class="code-name">&amp;#xe66e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe66f;</span>
                <div class="name">报告</div>
                <div class="code-name">&amp;#xe66f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe670;</span>
                <div class="name">双箭头</div>
                <div class="code-name">&amp;#xe670;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe671;</span>
                <div class="name">影像</div>
                <div class="code-name">&amp;#xe671;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe672;</span>
                <div class="name">胶片</div>
                <div class="code-name">&amp;#xe672;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe674;</span>
                <div class="name">返回</div>
                <div class="code-name">&amp;#xe674;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe673;</span>
                <div class="name">列表展开</div>
                <div class="code-name">&amp;#xe673;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe675;</span>
                <div class="name">列表收起</div>
                <div class="code-name">&amp;#xe675;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe676;</span>
                <div class="name">新增采集服务</div>
                <div class="code-name">&amp;#xe676;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe677;</span>
                <div class="name">单选_选中</div>
                <div class="code-name">&amp;#xe677;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe678;</span>
                <div class="name">下载采集工具</div>
                <div class="code-name">&amp;#xe678;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe679;</span>
                <div class="name">表格_编_辑</div>
                <div class="code-name">&amp;#xe679;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe67a;</span>
                <div class="name">表格_禁用</div>
                <div class="code-name">&amp;#xe67a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe67c;</span>
                <div class="name">单选_默认</div>
                <div class="code-name">&amp;#xe67c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe67d;</span>
                <div class="name">表格_删_除</div>
                <div class="code-name">&amp;#xe67d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe67e;</span>
                <div class="name">表格_启动</div>
                <div class="code-name">&amp;#xe67e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe67f;</span>
                <div class="name">表格_重试</div>
                <div class="code-name">&amp;#xe67f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe680;</span>
                <div class="name">表格_取消</div>
                <div class="code-name">&amp;#xe680;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe681;</span>
                <div class="name">表格_解约</div>
                <div class="code-name">&amp;#xe681;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe682;</span>
                <div class="name">表格_拒绝</div>
                <div class="code-name">&amp;#xe682;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe683;</span>
                <div class="name">表格_通过</div>
                <div class="code-name">&amp;#xe683;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe684;</span>
                <div class="name">表格_拒绝</div>
                <div class="code-name">&amp;#xe684;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe685;</span>
                <div class="name">表格_通过</div>
                <div class="code-name">&amp;#xe685;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe686;</span>
                <div class="name">弹窗_关闭</div>
                <div class="code-name">&amp;#xe686;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe687;</span>
                <div class="name">首页_移动端</div>
                <div class="code-name">&amp;#xe687;</div>
              </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="unicode-">Unicode 引用</h2>
          <hr>

          <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
          <ul>
            <li>兼容性最好，支持 IE6+，及所有现代浏览器。</li>
            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
            <li>但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。</li>
          </ul>
          <blockquote>
            <p>注意：新版 iconfont 支持多色图标，这些多色图标在 Unicode 模式下将不能使用，如果有需求建议使用symbol 的引用方式</p>
          </blockquote>
          <p>Unicode 使用步骤如下：</p>
          <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
<pre><code class="language-css"
>@font-face {
  font-family: 'iconfont';
  src: url('iconfont.eot');
  src: url('iconfont.eot?#iefix') format('embedded-opentype'),
      url('iconfont.woff2') format('woff2'),
      url('iconfont.woff') format('woff'),
      url('iconfont.ttf') format('truetype'),
      url('iconfont.svg#iconfont') format('svg');
}
</code></pre>
          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
<pre><code class="language-css"
>.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
<pre>
<code class="language-html"
>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
</code></pre>
          <blockquote>
            <p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
          </blockquote>
          </div>
      </div>
      <div class="content font-class">
        <ul class="icon_lists dib-box">
          
          <li class="dib">
            <span class="icon iconfont icon-buju_1"></span>
            <div class="name">
              布局_(1)
            </div>
            <div class="code-name">.icon-buju_1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-gui_shuangjiantou"></span>
            <div class="name">
              规_双箭头
            </div>
            <div class="code-name">.icon-gui_shuangjiantou
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shuangjiantou1"></span>
            <div class="name">
              双箭头
            </div>
            <div class="code-name">.icon-shuangjiantou1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yingxiang"></span>
            <div class="name">
              影像
            </div>
            <div class="code-name">.icon-yingxiang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jiantou"></span>
            <div class="name">
              箭头
            </div>
            <div class="code-name">.icon-jiantou
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-quanping"></span>
            <div class="name">
              全屏
            </div>
            <div class="code-name">.icon-quanping
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-suoxiao"></span>
            <div class="name">
              缩小
            </div>
            <div class="code-name">.icon-suoxiao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-fenxiangjilu"></span>
            <div class="name">
              分享记录
            </div>
            <div class="code-name">.icon-fenxiangjilu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-caijipeizhi"></span>
            <div class="name">
              采集配置
            </div>
            <div class="code-name">.icon-caijipeizhi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yingxiangduibi"></span>
            <div class="name">
              影像对比
            </div>
            <div class="code-name">.icon-yingxiangduibi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jichushuju"></span>
            <div class="name">
              基础数据
            </div>
            <div class="code-name">.icon-jichushuju
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jianchajilu"></span>
            <div class="name">
              检查记录
            </div>
            <div class="code-name">.icon-jianchajilu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shujuguanli"></span>
            <div class="name">
              数据管理
            </div>
            <div class="code-name">.icon-shujuguanli
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-caidanlan_fenxiangshenpi"></span>
            <div class="name">
              菜单栏_分享审批
            </div>
            <div class="code-name">.icon-caidanlan_fenxiangshenpi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-caidanlan_rizhiguanli"></span>
            <div class="name">
              菜单栏_日志管理
            </div>
            <div class="code-name">.icon-caidanlan_rizhiguanli
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-caidanlan_fuwubaoxiu"></span>
            <div class="name">
              菜单栏_服务保修
            </div>
            <div class="code-name">.icon-caidanlan_fuwubaoxiu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-caidanlan_zhiliangbaogao"></span>
            <div class="name">
              菜单栏_质量报告
            </div>
            <div class="code-name">.icon-caidanlan_zhiliangbaogao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-caidanlan_guidangjilu"></span>
            <div class="name">
              菜单栏_归档记录
            </div>
            <div class="code-name">.icon-caidanlan_guidangjilu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-caidanlan_fangwenshouquan"></span>
            <div class="name">
              菜单栏_访问授权
            </div>
            <div class="code-name">.icon-caidanlan_fangwenshouquan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-caidanlan_canshushezhi"></span>
            <div class="name">
              菜单栏_参数设置
            </div>
            <div class="code-name">.icon-caidanlan_canshushezhi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-caidanlan_renwuguanli"></span>
            <div class="name">
              菜单栏_任务管理
            </div>
            <div class="code-name">.icon-caidanlan_renwuguanli
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-caidanlan_shujujianguan"></span>
            <div class="name">
              菜单栏_数据监管
            </div>
            <div class="code-name">.icon-caidanlan_shujujianguan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-caidanlan_shujujiaohuan"></span>
            <div class="name">
              菜单栏_数据交换
            </div>
            <div class="code-name">.icon-caidanlan_shujujiaohuan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-caidanlan_jigouxuanze"></span>
            <div class="name">
              菜单栏_机构选择
            </div>
            <div class="code-name">.icon-caidanlan_jigouxuanze
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-caidanlan_caijicelve"></span>
            <div class="name">
              菜单栏_采集策略
            </div>
            <div class="code-name">.icon-caidanlan_caijicelve
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-caidanlan_jiantouxia"></span>
            <div class="name">
              菜单栏_箭头下
            </div>
            <div class="code-name">.icon-caidanlan_jiantouxia
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-caidanlan_jiantoushang"></span>
            <div class="name">
              菜单栏_箭头上
            </div>
            <div class="code-name">.icon-caidanlan_jiantoushang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-caidanlan_zhankai"></span>
            <div class="name">
              菜单栏_展开
            </div>
            <div class="code-name">.icon-caidanlan_zhankai
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zhuangtailan_xiaoxi"></span>
            <div class="name">
              状态栏_消息
            </div>
            <div class="code-name">.icon-zhuangtailan_xiaoxi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-caidanlan_shouqi"></span>
            <div class="name">
              菜单栏_收起
            </div>
            <div class="code-name">.icon-caidanlan_shouqi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-caidanlan_you"></span>
            <div class="name">
              菜单栏_右
            </div>
            <div class="code-name">.icon-caidanlan_you
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zhuangtailan_shezhi"></span>
            <div class="name">
              状态栏_设置
            </div>
            <div class="code-name">.icon-zhuangtailan_shezhi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zizhirenzheng"></span>
            <div class="name">
              资质认证
            </div>
            <div class="code-name">.icon-zizhirenzheng
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shimingrenzheng"></span>
            <div class="name">
              实名认证
            </div>
            <div class="code-name">.icon-shimingrenzheng
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-cunchu"></span>
            <div class="name">
              存储
            </div>
            <div class="code-name">.icon-cunchu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tubiaoxuanzhong"></span>
            <div class="name">
              图表选中
            </div>
            <div class="code-name">.icon-tubiaoxuanzhong
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-liebiaomoren"></span>
            <div class="name">
              列表默认
            </div>
            <div class="code-name">.icon-liebiaomoren
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-chuangkouqiehuan"></span>
            <div class="name">
              窗口切换
            </div>
            <div class="code-name">.icon-chuangkouqiehuan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-biaoge_chakanxiangqing"></span>
            <div class="name">
              表格_查看详情
            </div>
            <div class="code-name">.icon-biaoge_chakanxiangqing
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-biaoge_xinxibuquan"></span>
            <div class="name">
              表格_信息修改
            </div>
            <div class="code-name">.icon-biaoge_xinxibuquan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shenqingdan"></span>
            <div class="name">
              申请单
            </div>
            <div class="code-name">.icon-shenqingdan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-baogao1"></span>
            <div class="name">
              报告
            </div>
            <div class="code-name">.icon-baogao1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shuangjiantou"></span>
            <div class="name">
              双箭头
            </div>
            <div class="code-name">.icon-shuangjiantou
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yingxiang2"></span>
            <div class="name">
              影像
            </div>
            <div class="code-name">.icon-yingxiang2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jiaopian"></span>
            <div class="name">
              胶片
            </div>
            <div class="code-name">.icon-jiaopian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-fanhui"></span>
            <div class="name">
              返回
            </div>
            <div class="code-name">.icon-fanhui
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-liebiaozhankai"></span>
            <div class="name">
              列表展开
            </div>
            <div class="code-name">.icon-liebiaozhankai
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-liebiaoshouqi"></span>
            <div class="name">
              列表收起
            </div>
            <div class="code-name">.icon-liebiaoshouqi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xinzengcaijifuwu"></span>
            <div class="name">
              新增采集服务
            </div>
            <div class="code-name">.icon-xinzengcaijifuwu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-danxuan_xuanzhong"></span>
            <div class="name">
              单选_选中
            </div>
            <div class="code-name">.icon-danxuan_xuanzhong
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xiazaicaijigongju"></span>
            <div class="name">
              下载采集工具
            </div>
            <div class="code-name">.icon-xiazaicaijigongju
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-biaoge_bian_ji"></span>
            <div class="name">
              表格_编_辑
            </div>
            <div class="code-name">.icon-biaoge_bian_ji
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-biaoge_jinyong"></span>
            <div class="name">
              表格_禁用
            </div>
            <div class="code-name">.icon-biaoge_jinyong
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-danxuan_moren"></span>
            <div class="name">
              单选_默认
            </div>
            <div class="code-name">.icon-danxuan_moren
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-biaoge_shan_chu"></span>
            <div class="name">
              表格_删_除
            </div>
            <div class="code-name">.icon-biaoge_shan_chu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-biaoge_qidong"></span>
            <div class="name">
              表格_启动
            </div>
            <div class="code-name">.icon-biaoge_qidong
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-biaoge_zhongshi"></span>
            <div class="name">
              表格_重试
            </div>
            <div class="code-name">.icon-biaoge_zhongshi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-biaoge_quxiao"></span>
            <div class="name">
              表格_取消
            </div>
            <div class="code-name">.icon-biaoge_quxiao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-biaoge_jieyue"></span>
            <div class="name">
              表格_解约
            </div>
            <div class="code-name">.icon-biaoge_jieyue
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-biaoge_jujue"></span>
            <div class="name">
              表格_拒绝
            </div>
            <div class="code-name">.icon-biaoge_jujue
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-biaoge_tongguo"></span>
            <div class="name">
              表格_通过
            </div>
            <div class="code-name">.icon-biaoge_tongguo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-biaoge_jujue1"></span>
            <div class="name">
              表格_拒绝
            </div>
            <div class="code-name">.icon-biaoge_jujue1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-biaoge_tongguo1"></span>
            <div class="name">
              表格_通过
            </div>
            <div class="code-name">.icon-biaoge_tongguo1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-danchuang_guanbi"></span>
            <div class="name">
              弹窗_关闭
            </div>
            <div class="code-name">.icon-danchuang_guanbi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shouye_yidongduan"></span>
            <div class="name">
              首页_移动端
            </div>
            <div class="code-name">.icon-shouye_yidongduan
            </div>
          </li>
          
        </ul>
        <div class="article markdown">
        <h2 id="font-class-">font-class 引用</h2>
        <hr>

        <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
        <p>与 Unicode 使用方式相比，具有如下特点：</p>
        <ul>
          <li>兼容性良好，支持 IE8+，及所有现代浏览器。</li>
          <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
          <li>不过因为本质上还是使用的字体，所以多色图标还是不支持的。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
</code></pre>
        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;span class="iconfont icon-xxx"&gt;&lt;/span&gt;
</code></pre>
        <blockquote>
          <p>"
            iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
        </blockquote>
      </div>
      </div>
      <div class="content symbol">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-buju_1"></use>
                </svg>
                <div class="name">布局_(1)</div>
                <div class="code-name">#icon-buju_1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-gui_shuangjiantou"></use>
                </svg>
                <div class="name">规_双箭头</div>
                <div class="code-name">#icon-gui_shuangjiantou</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shuangjiantou1"></use>
                </svg>
                <div class="name">双箭头</div>
                <div class="code-name">#icon-shuangjiantou1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yingxiang"></use>
                </svg>
                <div class="name">影像</div>
                <div class="code-name">#icon-yingxiang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jiantou"></use>
                </svg>
                <div class="name">箭头</div>
                <div class="code-name">#icon-jiantou</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-quanping"></use>
                </svg>
                <div class="name">全屏</div>
                <div class="code-name">#icon-quanping</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-suoxiao"></use>
                </svg>
                <div class="name">缩小</div>
                <div class="code-name">#icon-suoxiao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-fenxiangjilu"></use>
                </svg>
                <div class="name">分享记录</div>
                <div class="code-name">#icon-fenxiangjilu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-caijipeizhi"></use>
                </svg>
                <div class="name">采集配置</div>
                <div class="code-name">#icon-caijipeizhi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yingxiangduibi"></use>
                </svg>
                <div class="name">影像对比</div>
                <div class="code-name">#icon-yingxiangduibi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jichushuju"></use>
                </svg>
                <div class="name">基础数据</div>
                <div class="code-name">#icon-jichushuju</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jianchajilu"></use>
                </svg>
                <div class="name">检查记录</div>
                <div class="code-name">#icon-jianchajilu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shujuguanli"></use>
                </svg>
                <div class="name">数据管理</div>
                <div class="code-name">#icon-shujuguanli</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-caidanlan_fenxiangshenpi"></use>
                </svg>
                <div class="name">菜单栏_分享审批</div>
                <div class="code-name">#icon-caidanlan_fenxiangshenpi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-caidanlan_rizhiguanli"></use>
                </svg>
                <div class="name">菜单栏_日志管理</div>
                <div class="code-name">#icon-caidanlan_rizhiguanli</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-caidanlan_fuwubaoxiu"></use>
                </svg>
                <div class="name">菜单栏_服务保修</div>
                <div class="code-name">#icon-caidanlan_fuwubaoxiu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-caidanlan_zhiliangbaogao"></use>
                </svg>
                <div class="name">菜单栏_质量报告</div>
                <div class="code-name">#icon-caidanlan_zhiliangbaogao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-caidanlan_guidangjilu"></use>
                </svg>
                <div class="name">菜单栏_归档记录</div>
                <div class="code-name">#icon-caidanlan_guidangjilu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-caidanlan_fangwenshouquan"></use>
                </svg>
                <div class="name">菜单栏_访问授权</div>
                <div class="code-name">#icon-caidanlan_fangwenshouquan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-caidanlan_canshushezhi"></use>
                </svg>
                <div class="name">菜单栏_参数设置</div>
                <div class="code-name">#icon-caidanlan_canshushezhi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-caidanlan_renwuguanli"></use>
                </svg>
                <div class="name">菜单栏_任务管理</div>
                <div class="code-name">#icon-caidanlan_renwuguanli</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-caidanlan_shujujianguan"></use>
                </svg>
                <div class="name">菜单栏_数据监管</div>
                <div class="code-name">#icon-caidanlan_shujujianguan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-caidanlan_shujujiaohuan"></use>
                </svg>
                <div class="name">菜单栏_数据交换</div>
                <div class="code-name">#icon-caidanlan_shujujiaohuan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-caidanlan_jigouxuanze"></use>
                </svg>
                <div class="name">菜单栏_机构选择</div>
                <div class="code-name">#icon-caidanlan_jigouxuanze</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-caidanlan_caijicelve"></use>
                </svg>
                <div class="name">菜单栏_采集策略</div>
                <div class="code-name">#icon-caidanlan_caijicelve</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-caidanlan_jiantouxia"></use>
                </svg>
                <div class="name">菜单栏_箭头下</div>
                <div class="code-name">#icon-caidanlan_jiantouxia</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-caidanlan_jiantoushang"></use>
                </svg>
                <div class="name">菜单栏_箭头上</div>
                <div class="code-name">#icon-caidanlan_jiantoushang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-caidanlan_zhankai"></use>
                </svg>
                <div class="name">菜单栏_展开</div>
                <div class="code-name">#icon-caidanlan_zhankai</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zhuangtailan_xiaoxi"></use>
                </svg>
                <div class="name">状态栏_消息</div>
                <div class="code-name">#icon-zhuangtailan_xiaoxi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-caidanlan_shouqi"></use>
                </svg>
                <div class="name">菜单栏_收起</div>
                <div class="code-name">#icon-caidanlan_shouqi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-caidanlan_you"></use>
                </svg>
                <div class="name">菜单栏_右</div>
                <div class="code-name">#icon-caidanlan_you</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zhuangtailan_shezhi"></use>
                </svg>
                <div class="name">状态栏_设置</div>
                <div class="code-name">#icon-zhuangtailan_shezhi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zizhirenzheng"></use>
                </svg>
                <div class="name">资质认证</div>
                <div class="code-name">#icon-zizhirenzheng</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shimingrenzheng"></use>
                </svg>
                <div class="name">实名认证</div>
                <div class="code-name">#icon-shimingrenzheng</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-cunchu"></use>
                </svg>
                <div class="name">存储</div>
                <div class="code-name">#icon-cunchu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tubiaoxuanzhong"></use>
                </svg>
                <div class="name">图表选中</div>
                <div class="code-name">#icon-tubiaoxuanzhong</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-liebiaomoren"></use>
                </svg>
                <div class="name">列表默认</div>
                <div class="code-name">#icon-liebiaomoren</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-chuangkouqiehuan"></use>
                </svg>
                <div class="name">窗口切换</div>
                <div class="code-name">#icon-chuangkouqiehuan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-biaoge_chakanxiangqing"></use>
                </svg>
                <div class="name">表格_查看详情</div>
                <div class="code-name">#icon-biaoge_chakanxiangqing</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-biaoge_xinxibuquan"></use>
                </svg>
                <div class="name">表格_信息修改</div>
                <div class="code-name">#icon-biaoge_xinxibuquan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shenqingdan"></use>
                </svg>
                <div class="name">申请单</div>
                <div class="code-name">#icon-shenqingdan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-baogao1"></use>
                </svg>
                <div class="name">报告</div>
                <div class="code-name">#icon-baogao1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shuangjiantou"></use>
                </svg>
                <div class="name">双箭头</div>
                <div class="code-name">#icon-shuangjiantou</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yingxiang2"></use>
                </svg>
                <div class="name">影像</div>
                <div class="code-name">#icon-yingxiang2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jiaopian"></use>
                </svg>
                <div class="name">胶片</div>
                <div class="code-name">#icon-jiaopian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-fanhui"></use>
                </svg>
                <div class="name">返回</div>
                <div class="code-name">#icon-fanhui</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-liebiaozhankai"></use>
                </svg>
                <div class="name">列表展开</div>
                <div class="code-name">#icon-liebiaozhankai</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-liebiaoshouqi"></use>
                </svg>
                <div class="name">列表收起</div>
                <div class="code-name">#icon-liebiaoshouqi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xinzengcaijifuwu"></use>
                </svg>
                <div class="name">新增采集服务</div>
                <div class="code-name">#icon-xinzengcaijifuwu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-danxuan_xuanzhong"></use>
                </svg>
                <div class="name">单选_选中</div>
                <div class="code-name">#icon-danxuan_xuanzhong</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xiazaicaijigongju"></use>
                </svg>
                <div class="name">下载采集工具</div>
                <div class="code-name">#icon-xiazaicaijigongju</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-biaoge_bian_ji"></use>
                </svg>
                <div class="name">表格_编_辑</div>
                <div class="code-name">#icon-biaoge_bian_ji</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-biaoge_jinyong"></use>
                </svg>
                <div class="name">表格_禁用</div>
                <div class="code-name">#icon-biaoge_jinyong</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-danxuan_moren"></use>
                </svg>
                <div class="name">单选_默认</div>
                <div class="code-name">#icon-danxuan_moren</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-biaoge_shan_chu"></use>
                </svg>
                <div class="name">表格_删_除</div>
                <div class="code-name">#icon-biaoge_shan_chu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-biaoge_qidong"></use>
                </svg>
                <div class="name">表格_启动</div>
                <div class="code-name">#icon-biaoge_qidong</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-biaoge_zhongshi"></use>
                </svg>
                <div class="name">表格_重试</div>
                <div class="code-name">#icon-biaoge_zhongshi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-biaoge_quxiao"></use>
                </svg>
                <div class="name">表格_取消</div>
                <div class="code-name">#icon-biaoge_quxiao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-biaoge_jieyue"></use>
                </svg>
                <div class="name">表格_解约</div>
                <div class="code-name">#icon-biaoge_jieyue</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-biaoge_jujue"></use>
                </svg>
                <div class="name">表格_拒绝</div>
                <div class="code-name">#icon-biaoge_jujue</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-biaoge_tongguo"></use>
                </svg>
                <div class="name">表格_通过</div>
                <div class="code-name">#icon-biaoge_tongguo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-biaoge_jujue1"></use>
                </svg>
                <div class="name">表格_拒绝</div>
                <div class="code-name">#icon-biaoge_jujue1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-biaoge_tongguo1"></use>
                </svg>
                <div class="name">表格_通过</div>
                <div class="code-name">#icon-biaoge_tongguo1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-danchuang_guanbi"></use>
                </svg>
                <div class="name">弹窗_关闭</div>
                <div class="code-name">#icon-danchuang_guanbi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shouye_yidongduan"></use>
                </svg>
                <div class="name">首页_移动端</div>
                <div class="code-name">#icon-shouye_yidongduan</div>
            </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="symbol-">Symbol 引用</h2>
          <hr>

          <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
            这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
          <ul>
            <li>支持多色图标了，不再受单色限制。</li>
            <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
            <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
            <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
          </ul>
          <p>使用步骤如下：</p>
          <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
</code></pre>
          <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
<pre><code class="language-html">&lt;style&gt;
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
&lt;/style&gt;
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
&lt;/svg&gt;
</code></pre>
          </div>
      </div>

    </div>
  </div>
  <script>
  $(document).ready(function () {
      $('.tab-container .content:first').show()

      $('#tabs li').click(function (e) {
        var tabContent = $('.tab-container .content')
        var index = $(this).index()

        if ($(this).hasClass('active')) {
          return
        } else {
          $('#tabs li').removeClass('active')
          $(this).addClass('active')

          tabContent.hide().eq(index).fadeIn()
        }
      })
    })
  </script>
</body>
</html>
